import {observer} from 'mobx-react-lite';
import {Path, SvgProps} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';
import {IconProps} from './types';

export const SvgNextPage = observer((props: IconProps) => {
  const {colorKey = 'color_31'} = props;
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      <Path
        d="M18.3374 3.5H6.3374C4.68055 3.5 3.3374 4.84315 3.3374 6.5V18.5C3.3374 20.1569 4.68055 21.5 6.3374 21.5H18.3374C19.9943 21.5 21.3374 20.1569 21.3374 18.5V6.5C21.3374 4.84315 19.9943 3.5 18.3374 3.5Z"
        fill="white"
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <Path
        d="M10.1831 8.19128L14.0676 12.0757C14.3019 12.3101 14.3019 12.6899 14.0676 12.9243L10.1831 16.8087"
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </SvgCommon>
  );
});
